<div class="panel panel-default" style="margin-top: 30px">
    <div class="panel-body">
        <form class="form-horizontal" method="post" ng-controller="addServiceInfoCtrl" style="margin-top: 30px">
            <fieldset>
                <!--<legend>Add User</legend>-->
                <div class="form-group">
                    <label class="col-sm-1 control-label">Service Type:</label>

                    <div class="col-sm-2">
                        <select class="form-control" ng-model="vm.serviceInfo.serviceType"
                                ng-options="service for service in serviceTypeForSelect"></select>
                    </div>
                    <label class="col-sm-1 control-label">Producer:</label>

                    <div class="col-sm-2">
                        <select class="form-control" ng-model="vm.serviceInfo.producer"
                                ng-options="domain for domain in domainList"></select>
                    </div>
                    <label class="col-sm-1 control-label">Consumer:</label>

                    <div class="col-sm-2">
                        <select class="form-control" ng-model="vm.serviceInfo.consumer"
                                ng-options="domain for domain in domainList"></select>
                    </div>
                    <label class="col-sm-1 control-label">Service Name:</label>

                    <div class="col-sm-2">
                        <input type="text" class="form-control" ng-model="vm.serviceInfo.detail">
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-1 control-label">Remark:</label>

                    <div class="col-sm-4">
                <textarea type="text" class="form-control" ng-model="vm.serviceInfo.remark">

                </textarea>
                    </div>
                    <div class="col-sm-4">
                        <button type="button" class="btn btn-info"
                                ng-click="vm.updateServiceInfo(vm.serviceInfo, 'New')">Save
                        </button>
                    </div>
                </div>

            </fieldset>
        </form>
    </div>
</div>
<div id="configDomian">
    <div class="panel panel-default" style="margin-top: 30px">
        <div class="panel-body">
            <div class="form-group">
                <label class="col-sm-2 control-label">Domain Name:</label>

                <div class="col-sm-4">
                    <input type="text" class="form-control" ng-model="vm.domain.domainName">
                </div>
                <div class="col-sm-4">
                    <button type="button" class="btn btn-info"
                            ng-click="vm.addTarget('Domain',vm.domain.domainName)">Save
                    </button>
                </div>
            </div>
            <br>
            <div>
                <div class="form-group">
                    <div class="col-sm-1" ng-repeat="data in domainList">
                        <label class="label label-primary"><span style="font-size: larger">{{data}}</span>
                            <button type="button" class="close" data-dismiss="modal" ng-click="vm.deleteTarget('Domain',data)"><span
                                    aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                        </label>
                    </div>
                </div>
            </div>

        </div>
    </div>
</div>

<div id="configServiceType">
    <div class="panel panel-default" style="margin-top: 30px">
        <div class="panel-body">
            <div class="form-group">
                <label class="col-sm-2 control-label">ServiceType:</label>

                <div class="col-sm-4">
                    <input type="text" class="form-control" ng-model="vm.serviceType.serviceTypeName">
                </div>
                <div class="col-sm-4">
                    <button type="button" class="btn btn-info"
                            ng-click="vm.addTarget('ServiceType',vm.serviceType.serviceTypeName)">Save
                    </button>
                </div>
            </div>
            <br>
            <div>
                <div class="form-group">
                    <div class="col-sm-1" ng-repeat="ser in serviceTypeForSelect">
                        <label class="label label-warning"><span style="font-size: larger">{{ser}}</span>
                            <button type="button" class="close" data-dismiss="modal" ng-click="vm.deleteTarget('ServiceType', ser)"><span
                                    aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                        </label>
                    </div>
                </div>
            </div>

        </div>
    </div>
</div>

<div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel"
     aria-hidden="true" id="addedServiceModal">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header" ng-style="vm.color" id="resultModalHead">
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span
                        class="sr-only">Close</span></button>
                <h4 class="modal-title" id="myModalLabel">Message</h4>
            </div>
            <div class="modal-body">
                <p ng-bind="vm.message"></p>
            </div>

        </div>
    </div>
</div>